<template>
    <el-form :inline="true" :model="form" class="demo-form-inline">
    <el-form-item>
        <el-button type="primary" @click="adddialogForm = true" icon="search">新增</el-button>
        <el-button type="danger" @click="onDelete" icon="delete">删除</el-button>
        <el-button type="primary" @click="uploaddialogForm = true">模板下载</el-button>
        <el-button type="primary" @click="uploaddialogForm = true">导入</el-button>
        <el-button type="primary" @click="uploaddialogForm = true">运单号生成工具下载</el-button>
        <el-button type="primary" @click="exportCase= true">保存数据</el-button>      
        <el-button type="primary" @click="onDelete" icon="caret-right">执行</el-button>
    </el-form-item>
  <!--新增-->
  <el-dialog title="新增数据" v-model="adddialogForm">
  <el-form :model="form">

    <el-form-item label="是否出口：" :label-width="formLabelWidth">
      <el-input v-model="id" auto-complete="off"></el-input>
    </el-form-item>
  
    <el-form-item label="运单号：" :label-width="formLabelWidth">
      <el-input v-model="descript" auto-complete="off"></el-input>
    </el-form-item>

    <el-form-item label="原寄地：" :label-width="formLabelWidth">
        <el-input v-model="id" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="目的地：" :label-width="formLabelWidth">
        <el-input v-model="descript" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="付款方式：" :label-width="formLabelWidth">
      <el-input v-model="valueName" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="结算方式：" :label-width="formLabelWidth">
      <el-input v-model="valueObject" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="月结账号：" :label-width="formLabelWidth">
      <el-input v-model="idObject" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="重量：" :label-width="formLabelWidth">
      <el-input v-model="operate" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="运费：" :label-width="formLabelWidth">
      <el-input v-model="value1" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="合计费用：" :label-width="formLabelWidth">
      <el-input v-model="value2" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="寄件工号：" :label-width="formLabelWidth">
      <el-input v-model="value2" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="增值服务：" :label-width="formLabelWidth">
      <el-input v-model="value2" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="时效类型：" :label-width="formLabelWidth">
      <el-input v-model="value2" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="业务类型：" :label-width="formLabelWidth">
      <el-input v-model="value2" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="快件内容：" :label-width="formLabelWidth">
      <el-input v-model="value2" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="派件工号：" :label-width="formLabelWidth">
      <el-input v-model="value2" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="付款地区：" :label-width="formLabelWidth">
      <el-input v-model="value2" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="税金付款方式：" :label-width="formLabelWidth">
        <el-select v-model="value2" placeholder="税金付款方式">
          <el-option label="寄付" value="1"></el-option>
          <el-option label="到付" value="2"></el-option>
        </el-select>
    </el-form-item>
    <el-form-item label="税金卡号：" :label-width="formLabelWidth">
      <el-input v-model="value2" auto-complete="off"></el-input>
    </el-form-item>
    
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="adddialogForm = false">取 消</el-button>
    <el-button type="primary" @click="adddialogForm = false">保存</el-button>
  </div>
</el-dialog>
<!--修改-->
  <el-dialog title="修改测试步骤" v-model="updatedialogForm">
  <el-form :model="form">

    <el-form-item label="是否出口：" :label-width="formLabelWidth">
      <el-input v-model="id" auto-complete="off"></el-input>
    </el-form-item>
  
    <el-form-item label="运单号：" :label-width="formLabelWidth">
      <el-input v-model="descript" auto-complete="off"></el-input>
    </el-form-item>

    <el-form-item label="原寄地：" :label-width="formLabelWidth">
        <el-input v-model="id" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="目的地：" :label-width="formLabelWidth">
        <el-input v-model="descript" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="付款方式：" :label-width="formLabelWidth">
      <el-input v-model="valueName" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="结算方式：" :label-width="formLabelWidth">
      <el-input v-model="valueObject" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="月结账号：" :label-width="formLabelWidth">
      <el-input v-model="idObject" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="重量：" :label-width="formLabelWidth">
      <el-input v-model="operate" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="运费：" :label-width="formLabelWidth">
      <el-input v-model="value1" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="合计费用：" :label-width="formLabelWidth">
      <el-input v-model="value2" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="寄件工号：" :label-width="formLabelWidth">
      <el-input v-model="value2" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="增值服务：" :label-width="formLabelWidth">
      <el-input v-model="value2" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="时效类型：" :label-width="formLabelWidth">
      <el-input v-model="value2" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="业务类型：" :label-width="formLabelWidth">
      <el-input v-model="value2" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="快件内容：" :label-width="formLabelWidth">
      <el-input v-model="value2" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="派件工号：" :label-width="formLabelWidth">
      <el-input v-model="value2" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="付款地区：" :label-width="formLabelWidth">
      <el-input v-model="value2" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="税金付款方式：" :label-width="formLabelWidth">
      <el-input v-model="value2" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="税金卡号：" :label-width="formLabelWidth">
      <el-input v-model="value2" auto-complete="off"></el-input>
    </el-form-item>
    
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="updatedialogForm = false">取 消</el-button>
    <el-button type="primary" @click="updatedialogForm = false">保存</el-button>
  </div>
</el-dialog>
<!--导入-->
  <el-dialog title="导入准备数据" v-model="uploaddialogForm">
  <!--上传-->
    <el-upload
      class="uploadCase"
      action="https://jsonplaceholder.typicode.com/posts/"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :file-list="fileList">
      <el-button size="small" type="primary">导入</el-button>
      <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件，且不超过10m</div>
    </el-upload>
</el-dialog>
<!--导出-->
<el-dialog title="提示" v-model="exportCase" size="tiny">
  <span>确认导出该数据吗？</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="exportCase = false">取 消</el-button>
    <el-button type="primary" @click="exportCase = false">确 定</el-button>
  </span>
</el-dialog>
<!--结果展示-->
<el-table
    :data="tableData"
    border
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
        prop="id"
        label="是否出口"
        width="100">
      </el-table-column>
      <el-table-column
        prop="descript"
        label="运单号"
        width="100">
      </el-table-column>
      <el-table-column
        prop="parObject"
        label="原寄地"
        width="100">
      </el-table-column>
      <el-table-column
        prop="objectType"
        label="目的地"
        width="100">
      </el-table-column>
      <el-table-column
        prop="valueName"
        label="付款方式"
        width="100">
      </el-table-column>
      <el-table-column
        prop="valueObject"
        label="结算方式"
        width="100">
      </el-table-column>
      <el-table-column
        prop="idObject"
        label="月结账号"
        width="100">
      </el-table-column>
      <el-table-column
        prop="operate"
        label="重量"
        width="100">
      </el-table-column>
      <el-table-column
        prop="value1"
        label="运费"
        width="100">
      </el-table-column>
      <el-table-column
        prop="value2"
        label="合计费用"
        width="100">
      </el-table-column>
      <el-table-column
        prop="result"
        label="寄件工号"
        width="100">
      </el-table-column>
      <el-table-column
        prop="exception"
        label="增值服务"
        width="100">
      </el-table-column>
      <el-table-column
        prop="exception"
        label="时效类型"
        width="100">
      </el-table-column>
      <el-table-column
        prop="exception"
        label="业务类型"
        width="100">
      </el-table-column>
      <el-table-column
        prop="exception"
        label="快件内容"
        width="100">
      </el-table-column>
      <el-table-column
        prop="exception"
        label="派件工号"
        width="100">
      </el-table-column>
      <el-table-column
        prop="exception"
        label="付款地区"
        width="100">
      </el-table-column>
      <el-table-column
        prop="exception"
        label="税金付款方式"
        width="100">
      </el-table-column>
      <el-table-column
        prop="exception"
        label="税金卡号"
        width="100">
      </el-table-column>
       <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template scope="scope">
        <el-row :gutter="20">
        <el-button @click="updatedialogForm = true" type="primary" size="small" icon="edit">编辑</el-button>
        </el-row>
      </template>
    </el-table-column>
</el-table>
<div class="block">
  <span class="demonstration"></span>
  <el-pagination
    layout="prev, pager, next"
    :total="50">
  </el-pagination>
</div>
</el-form>

</template>

<script>
    export default {
    data() {
      return {
        options: [{
          value: 'parObject',
          label: 'B1.P'
        }],
        value2:'',
        caseName:'',
        adddialogForm: false,
        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
        updatedialogForm: false,
        uploaddialogForm:false,
        exportCase:false,
        labelPosition: 'right',
        tableData: [{
            num: '847794',
            name: '薛权周',
            mail: 'xuequanzhou@sf-express.com',
            id:'1',
           descript:'打开浏览器',
           parObject:'',
           objectType:'',
           valueName:'',
           valueObject:'',
           idObject:'',
           operate:'OpenBrowser',
           value1:'@path',
           value2:'',
           yesNo:'',
           result:'P',
           exception:''
          }],
          form: {
          num: '',
          name: '',
          mail: '',
          parObject:'',
          objectType:'',
          checked: true
        },
        formLabelWidth: '100px'
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      onSave(){
         this.$confirm('确认保存该条记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '保存成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消！'
          });          
        });
      },
      onDelete(){
         this.$confirm('确认删除该条记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
    }
  }
</script>

